<template>
  <el-table :data="tableData" height="600" style="width: 100%">
    <el-table-column label="商品名称" prop="name" />
    <el-table-column label="最低价格" prop="min_price" />
    <el-table-column label="最高价格" prop="max_price" />
    <el-table-column label="商品简介" prop="review_content" />
    <el-table-column label="商品图片">
      <!-- 自定义插槽区域 【可选】-->
      <template #default="scope">
        <!-- scope.row 可以获取当前对应行的数据对象 -->
        <img :src="scope.row.icon + '?x-oss-process=style/w100-webp'" alt="" />
      </template>
    </el-table-column>
    <el-table-column label="商品类别" width="180">
      <!-- 自定义插槽区域 【可选】-->
      <template #default="scope">
        <el-tag
          :color="`rgb(${Math.random() * 200},${Math.random() * 200},${
            Math.random() * 200
          })`"
          v-for="item in scope.row.filter_tags"
          effect="dark"
        >
          {{ item }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalNum"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { Timer } from "@element-plus/icons-vue";
import { ref } from "vue";
import { prodGet } from "../../api/product";

const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleDelete = (index, row) => {
  console.log(index, row);
};

const tableData = ref([
  {
    name: "商品名称",
    min_price: "1999",
    max_price: "2999",
    review_content: "商品简介",
    filter_tags: ["卧室", "现代", "皮革"],
    icon: "https://pimg.wzj.com/wzj/product/spu/2a298910-66ff-4379-b321-dfb03a87f064.jpg",
  },
]);

prodGet().then((data) => {
  tableData.value = data.results;
  totalNum.value = data.count;
});

//分页逻辑
const currentPage = ref(1);
const pageSize = ref(10);
const totalNum = ref(0);
const handleSizeChange = async (val) => {
  console.log(`${val} items per page`);
  pageSize.value = val; //记录当前用户选中的pageSize
  let data = await prodGet(pageSize.value, currentPage.value);
  tableData.value = data.results;
};
const handleCurrentChange = async (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val; //记录用户当前选中的页码
  let data = await prodGet(pageSize.value, currentPage.value);
  tableData.value = data.results;
};
</script>
